<!--陆品贤 scss布局首页顶部导航栏-->
<template>
  <!--顶部-->
  <div class="wrapper">
    <div v-if="!token">
      <div class="position" @click="$router.push('/login')">
        <span class="iconfont position-icon">&#xe8ae;</span>
        请登录
        <span class="iconfont position-notice">&#xe775;</span>
      </div>
    </div>
    <van-row v-else justify="center" style="margin: 15px 0 8px 0">
      <!-- <van-col span="4"><div class="logo" ></div></van-col> -->
      <van-col span="10" align="left"><span style="font-size: 16px">开饭啦~</span></van-col>
      <van-col span="10" align="center"><span style="font-size: 16px">欢迎你的使用</span></van-col>
    </van-row>
    <!-- <div v-else>
      <div class="position">
        <span class="iconfont position-icon">&#xe63f;</span>
        开饭啦~欢迎你的使用
      </div>
    </div> -->
    <!--搜索-->
    <van-search v-model="value" placeholder="请输入搜索关键词" input-align="center" shape="round" background="#ffd000"
      @click="onSearch" />
    <!-- <div class="search">
      <span class="iconfont">&#xeafe;</span>
      <span class="search-text" @click="$router.push('/search')">
        请输入商品或商家名称
      </span>
    </div> -->
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const { token } = localStorage;
const value = ref("");

console.log(token);
const router = useRouter(); //获取到router 对象，用于编程式跳转导航
function onSearch() {
  router.push('/search');
}
</script>

<style scoped lang="scss">
@import "../../style/mixins.scss";
@import "../../style/viriables.scss";

/*顶部导航栏 */
.wrapper {
  position: absolute;
  left: 0%;
  top: 0;
  right: 0;
  bottom: 50px;
  padding: 0 10px;
  background: #ffd000;
  height: 110px;

  .position {
    position: relative;
    padding: 16px 24px 16px;
    line-height: 22px;
    font-size: 16px;
    color: $content-fontcolor;
    //引入
    @include ellipse;

    &-icon {
      position: relative;
      top: 1px;
      font-size: 20px;
    }

    &-notice {
      position: absolute;
      right: 10px;
      top: 17px;
      font: 20px;
    }
  }
  .logo{
    position: absolute;
     height: 20px;
    width: 100px;
    //background-color: #b7b7b7;
   //background:url(../../assets/img/logo1.png) no-repeat;
    background-size: cover;
  }
}

/*搜索栏 */
.search {
  margin-bottom: 12px;
  line-height: 32px;
  background: #f5f5f5;
  color: #b7b7b7;

  .iconfont {
    display: inline-block;
    padding: 0 8px 0 16px;
    font-size: 16px;
  }

  &-text {
    display: inline-block;
    font-size: 14px;
  }
}
</style>
